<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>LavaJet</title>
</h:head>
<h:body>
	<h:form id="form">
		<p:panel id="panel" header="Cliente">
			<p:messages id="messages" showDetail="true" />

			<p:dataTable var="cliente" value="#{consultaBean.clientes}"
				rowKey="#{cliente.id}" paginator="true" rows="10"
				selection="#{consultaBean.selectedCliente}" selectionMode="single"
				filteredValue="#{consultaBean.filteredClientes}" id="clisTable"
				editable="true" emptyMessage="Nenhum registro." resizableColumns="false">

				<f:facet name="header"> Clientes </f:facet>

				<p:ajax event="rowEdit" listener="#{consultaBean.onEdit}"
					update=":form:messages" />
				<p:ajax event="rowEditCancel" listener="#{consultaBean.onCancel}"
					update=":form:messages" />

				<p:column style="width:6%">
					<p:rowEditor />
				</p:column>
				
				<p:column headerText="nome" sortBy="nome" filterBy="nome" id="nome"  
				 style="max-width: 100px; min-width: 30px; overflow: hidden" >
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{cliente.nome}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{cliente.nome}" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="celular" sortBy="celular" filterBy="celular"
					id="celular">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{cliente.celular}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{cliente.celular}" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="cep" sortBy="cep" filterBy="cep" id="cep">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{cliente.cep}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{cliente.cep}" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="cidade" sortBy="cidade" filterBy="cidade"
					id="cidade">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{cliente.cidade}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{cliente.cidade}" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="cpf" sortBy="cpf" filterBy="cpf" id="cpf">
					<h:outputText value="#{cliente.cpf}" />
				</p:column>

				<p:column headerText="rg" sortBy="rg" filterBy="rg" id="rg">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{cliente.rg}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{cliente.rg}" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="email" sortBy="email" filterBy="email"
					id="email">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{cliente.email}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{cliente.email}" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="endereco" sortBy="endereco"
					filterBy="endereco" id="endereco">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{cliente.endereco}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{cliente.endereco}" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="telefone" sortBy="telefone"
					filterBy="telefone" id="telefone">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{cliente.telefone}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{cliente.telefone}" />
						</f:facet>
					</p:cellEditor>
				</p:column>

			</p:dataTable>

			<div id="busca">
				<h3>
					Exibir detalhes:
					<p:commandButton id="selectButton" update=":form:display"
						oncomplete="PF('cliDialog').show()" icon="ui-icon-search"
						title="View">

					</p:commandButton>
				</h3>
			</div>

			<p:dialog header="Vinculos do Cliente" widgetVar="cliDialog"
				resizable="false" showEffect="explode" hideEffect="explode">

				<h:panelGrid id="display" columns="2" cellpadding="4">

					<f:facet name="header">
					</f:facet>

					<p:dataTable var="veiculo" value="#{consultaBean.veiculos}"
						paginator="true" rows="10" id="veisTable"
						filteredValue="#{consultaBean.filteredVeiculos}">

						<f:facet name="header"> Veiculos </f:facet>

						<p:column headerText="marca">
							<h:outputText value="#{veiculo.marca}" />
						</p:column>
						<p:column headerText="modelo">
							<h:outputText value="#{veiculo.modelo}" />
						</p:column>
						<p:column headerText="placa">
							<h:outputText value="#{veiculo.placa}" />
						</p:column>
						<p:column headerText="cor">
							<h:outputText value="#{veiculo.cor}" />
						</p:column>

					</p:dataTable>

				</h:panelGrid>
			</p:dialog>
		</p:panel>
	</h:form>
</h:body>
</html>
